<!-- src/views/Dashboard.vue -->
<template>
  <div class="playback-container">
    <div class="sidebar">
      <el-form>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="Select date and time"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="endTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="Select date and time"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="onStartPlayback">开始回放</el-button>
          <el-button @click="onStopPlayback">停止回放</el-button>
          <el-button @click="onPause">暂停</el-button>
          <el-button @click="onResume">恢复</el-button>
          <el-button @click="onPlayFast">快进</el-button>
          <el-button @click="onPlaySlow">慢进</el-button>
        </el-form-item>
      </el-form>

      <div class="log">
        <el-input type="textarea" :rows="10" v-model="log" readonly></el-input>
      </div>
    </div>

    <div class="main">
      <div id="divPlugin"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, reactive } from "vue";

import hkVideoService from "../services/hkVideoService.js";

const { log } = hkVideoService;

const startTime = ref("");
const endTime = ref("");

const config = reactive({
  ip: "172.16.0.241",
  port: 80,
  username: "admin",
  password: "Aa123456",
});

const onStartPlayback = () => {
  hkVideoService.startPlayback(1, startTime.value, endTime.value);
};

const onStopPlayback = () => {
  hkVideoService.stopPlayback();
};

const onPause = () => {
  hkVideoService.pause();
};

const onResume = () => {
  hkVideoService.resume();
};

const onPlayFast = () => {
  hkVideoService.playFast();
};

const onPlaySlow = () => {
  hkVideoService.playSlow();
};

onMounted(async () => {
  await hkVideoService.initPlugin("divPlugin");

  setTimeout(async () => {
    await hkVideoService.login(config);
    await hkVideoService.getChannelList();
  }, 1000);
});

onBeforeUnmount(async () => {
  await hkVideoService.logout();
  await hkVideoService.destroyPlugin();
});
</script>

<style scoped>
.playback-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #6ab04c;
}

.sidebar {
  width: 400px;
  padding: 20px;
  background-color: #fff;
}

.main {
  flex: 1;
}

#divPlugin {
  width: 100%;
  height: 100%;
}
</style>
